import React, { useEffect, useState } from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Provider } from "react-redux";
import { store } from "./store/redux";
import Layout from "./layout/index";
import { hot } from "react-hot-loader/root";
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    console.log(error, errorInfo);
    // logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

const App = function () {
  return (
    <div>
      <Provider store={store}>
        <ErrorBoundary>
          <Layout />
        </ErrorBoundary>
      </Provider>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById("app"));
if (module.hot) {
  module.hot.accept(App, () => {
    ReactDOM.render(<App />, document.getElementById("app"));
  });
}
/**
 * Detected AppContainer unmount on module './src/index.js' update.
Did you use "hot(App)" and "ReactDOM.render()" in the same file?
"hot(App)" shall only be used as export.
Please refer to "Getting Started"
检测到AppContainer在模块'./src/index.js'上卸载。
你在同一个文件中使用了“hot(App)”和“ReactDOM.render()”吗?
“hot(App)”只能用于出口。
 */
